<template>
  <view class="content">
    <!-- 1. Logo + 标题区域 -->
    <view class="header-group">
      <view class="logo-container">
        <image class="logo" src="/static/logo.png" mode="widthFix" />
      </view>
      <view class="text-area">
        <text class="title">{{ title }}</text>
      </view>
    </view>

    <!-- 2. 文本插值区域 -->
    <view class="interpolation-group card">
      <view class="section-header">
        <text class="section-title">文本插值示例</text>
      </view>
      <view class="interpolation-item">{{ number + 1 }}</view>
      <view class="interpolation-item">{{ ok ? 'YES' : 'NO' }}</view>
      <view class="interpolation-item">{{ message.split('').reverse().join('') }}</view>
    </view>

    <!-- 3. v-for列表区域 -->
    <view class="list-group card">
      <view class="section-header">
        <text class="section-title">列表渲染示例</text>
      </view>
      <view v-for="item in arr" :key="item.id" class="list-item list-item-primary">
        {{ JSON.stringify(item) }}
      </view>
      <view v-for="(item, index) in 6" :key="index" class="list-item list-item-secondary">
        <view :class="`list-style-${index % 2}`">{{ index + 2 }}</view>
      </view>
      <view v-for="(value, name, index) in object" :key="index" class="list-item">
        {{ index }}---{{ name }}---{{ value }}
      </view>
      <view v-for="item in arr" :key="item.id" class="list-item clickable-item" @click="handleItemClick(item.name)">
        {{ item.id }}:{{ item.name }}
      </view>
    </view>

    <!-- 4. 双向绑定v-model模块 -->
    <view class="module card">
      <view class="section-header">
        <text class="section-title">双向绑定示例</text>
      </view>
      <view class="logo-container">
        <image :class="className" src="/static/logo.png" mode="widthFix" />
      </view>
      <view class="modelclass">
        <input v-model="message" placeholder="请输入内容" @focus="showTip('输入框已激活')" />
        <text class="model-text">当前输入：{{ message || '暂无内容' }}</text>
      </view>
    </view>

    <!-- 5. 天气&State判断模块 -->
    <view class="module card">
      <view class="section-header">
        <text class="section-title">状态切换示例</text>
      </view>
      <view class="logo-container">
        <image class="logo" @click="toggleWeatherAndState" src="/static/logo.png" mode="widthFix" hover-class="logo-hover" />
      </view>
      <view class="weather-tip">{{ raining ? '下雨天，只能在家呆着了' : '今天天气真好' }}</view>
      <view class="state-tip" v-if="state">state的值是：{{ state }}</view>
      <view class="state-list">
        <view v-if="state === 'vue'" class="state-item active" @click="setState('vue')">
          uni-app
        </view>
        <view v-else-if="state === 'html'" class="state-item active" @click="setState('html')">
          HTML
        </view>
        <view v-else class="state-item active" @click="setState('APP')">
          APP
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const DEFAULT_TITLE = 'Hello UniAPP';
const INITIAL_STATE = 'vue';

export default {
  data() {
    return {
      title: DEFAULT_TITLE,
      number: 1,
      ok: true,
      message: 'Hello Vue',
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' },
        { id: 3, name: 'WeChat' },
        { id: 4, name: 'Android' }
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      },
      className: 'smalllogo',
      raining: false,
      state: INITIAL_STATE
    };
  },
  methods: {
    handleItemClick(itemName) {
      uni.showToast({ title: `已选择：${itemName}`, icon: 'none', duration: 1500 });
    },
    showTip(content) {
      uni.showToast({ title: content, icon: 'none', duration: 1000 });
    },
    toggleWeatherAndState() {
      this.raining = !this.raining;
      this.state = this.state === 'vue' ? 'html' : this.state === 'html' ? 'APP' : 'vue';
      this.showTip(`天气已切换 | State已切换为：${this.state}`);
    },
    setState(targetState) {
      this.state = targetState;
      this.showTip(`已切换到：${targetState}`);
    }
  },
  onLoad() {
    console.log('页面加载完成，初始化数据成功');
    this.showTip('页面已加载完成');
  }
};
</script>

<style scoped>
/* 全局容器样式 */
.content {
  padding: 20rpx;
  background-color: #f5f5f9;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 1. 头部区域样式 */
.header-group {
  text-align: center;
  margin: 30rpx 0 40rpx;
  padding: 30rpx 20rpx;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 20rpx rgba(99, 102, 241, 0.15);
}
.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}
.logo {
  width: 160rpx;
  height: 160rpx;
  transition: transform 0.3s ease;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.logo-hover {
  transform: scale(1.08);
}
.text-area {
  margin: 10rpx 0;
}
.title {
  font-size: 40rpx;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

/* 卡片通用样式 */
.card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-3rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
}

/* 区块标题样式 */
.section-header {
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  padding: 18rpx 25rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #ffffff;
}

/* 2. 文本插值区域样式 */
.interpolation-group {
  padding: 25rpx;
}
.interpolation-item {
  font-size: 32rpx;
  margin: 12rpx 0;
  color: #374151;
  padding: 8rpx 10rpx;
  border-radius: 6rpx;
  background-color: #f9fafb;
}

/* 3. v-for列表区域样式 */
.list-group {
  padding: 25rpx;
}
.list-item {
  font-size: 28rpx;
  margin: 10rpx 0;
  line-height: 1.6;
  padding: 8rpx 10rpx;
  border-radius: 6rpx;
}
.list-item-primary {
  color: #6366f1;
  background-color: #f5f3ff;
}
.list-item-secondary {
  color: #4f46e5;
  background-color: #f0f9ff;
}
.clickable-item {
  cursor: pointer;
  color: #6366f1 !important;
  background-color: #f5f3ff;
  border-left: 4rpx solid #6366f1;
  transition: background-color 0.2s ease;
}
.clickable-item:active {
  background-color: #ede9fe;
}
.list-style-0 {
  color: #6b7280;
}
.list-style-1 {
  color: #4b5563;
}

/* 4. 模块通用样式 */
.module {
  padding: 25rpx;
}

/* 5. v-model模块样式 */
.smalllogo {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.modelclass {
  margin: 15rpx 0;
  padding: 20rpx;
  background-color: #f5f3ff;
  border-radius: 10rpx;
}
.modelclass input {
  width: 100%;
  height: 70rpx;
  border: 1.5rpx solid #c4b5fd;
  border-radius: 8rpx;
  padding: 0 15rpx;
  font-size: 28rpx;
  margin-bottom: 15rpx;
  background-color: #fff;
  transition: border-color 0.2s ease;
}
.modelclass input:focus {
  border-color: #8b5cf6;
  outline: none;
}
.model-text {
  font-size: 28rpx;
  color: #4c1d95;
}

/* 6. 天气&State模块样式 */
.weather-tip {
  font-size: 28rpx;
  color: #374151;
  margin: 15rpx 0;
  text-align: center;
  padding: 10rpx;
  border-radius: 8rpx;
  background-color: #f3f4f6;
}
.state-tip {
  font-size: 28rpx;
  color: #6366f1;
  margin: 15rpx 0;
  text-align: center;
  font-weight: 500;
}
.state-list {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  gap: 15rpx;
}
.state-item {
  font-size: 28rpx;
  color: #6b7280;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f3f4f6;
}
.state-item.active {
  color: #ffffff;
  background-color: #6366f1;
  box-shadow: 0 2rpx 8rpx rgba(99, 102, 241, 0.2);
}
.state-item:active {
  transform: scale(0.96);
}
</style>